Skip to content

fix(前端): 修复英文界面引导弹窗底部按钮被遮挡#1704

Open
lanrenwo wants to merge 1 commit intoWei-Shaw:mainfrom
lanrenwo:fix/onboarding-footer-overflow-en
Open

fix(前端): 修复英文界面引导弹窗底部按钮被遮挡#1704
lanrenwo wants to merge 1 commit intoWei-Shaw:mainfrom
lanrenwo:fix/onboarding-footer-overflow-en

Conversation

@lanrenwo
Copy link
Copy Markdown

@lanrenwo lanrenwo commented Apr 16, 2026

问题描述

英文界面下,新手引导弹窗(onboarding tour)底部的「Start Setup」按钮被弹窗边框裁切,无法完整显示。

根本原因

弹窗宽度上限为 min(440px, 90vw),且设有 overflow: hidden。英文文本(「Flip Page」「Exit」「Start Setup」)比中文(「翻页」「退出」「开始配置」)更长,footer 内容总宽度约 467px,超出容器上限,右侧按钮被裁切。

修复方案

onboarding.css 的 footer 中添加 flex-wrap: wrap,并对按钮区域(.footer-right)设置 margin-left: auto

  • 空间充足时(中文):左右内容保持单行,布局不变
  • 空间不足时(英文):按钮区域自动换到下一行,并靠右对齐,按钮完整显示

影响范围

仅修改 frontend/src/styles/onboarding.css,不影响中文或其他语言的显示效果。

image image

英文文本比中文更长,footer 内容超出弹窗宽度(440px),导致
"Start Setup" 按钮被 overflow:hidden 裁切。

通过给 footer 添加 flex-wrap:wrap 并对按钮区域设置
margin-left:auto,空间不足时按钮自动换行到右侧,中文版
内容较短不受影响仍保持单行显示。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant